<!-- 
  几个注意点
  0. 首页展示和我的展示是否要一样? 待定
      首页要展示用户名, 而我的不用
      首页用发布时间排序, 我的用记录时间排序
  1. 标题有才显示
  2. 视频记录首帧, 展示在图片后面是最好的方式, 但工作量大
      现在采用更多来下拉展示
			
	组件的状态图
	普通 （长按）显示按钮 （选择编辑）编辑模式
	    （展开）展开模式  
 -->
<script setup lang="ts">
	import type { Log } from '@/env'
	import { provide } from 'vue'
	import LogTags from './comps/LogTags.vue'
	import LogContent from './comps/LogContent.vue'
	import LogMedias from './comps/LogMedias.vue'


	const { log } = defineProps<{ log : Log }>()
	/** 是否展示按钮，元素左移 */
	const showBtn = ref(true)
	provide('log', log) // 暴露给子组件

	// 展开和收起
	const isExpand = ref(true)
	provide('isExpand', isExpand)
	// const expand = () => (isExpand.value = !isExpand.value)

	const longpressLog = () => {
		uni.vibrateLong({})
		console.log("长按")
		showBtn.value = true
	}


	const clickLog = () => {
		showBtn.value = false
	}
</script>

<template>
	<view class="log">
		<view class="btns">
			<up-icon name="trash" size="64rpx"></up-icon>
		</view>

		<!-- :class="{showBtn}" -->
		<view class="m" :id="`log${log.id}`" @longpress="longpressLog" @click="clickLog">
			<!-- 页面底部：作者，时间 -->
			<view class="log-bottom">
				<view>{{ log.logtime.format('YYYY-MM-DD HH:mm') }}</view>
			</view>
			
			<LogContent />

			<!-- 图片和视频放在一起，还有音频，文件 -->
			<LogMedias />

			<!-- Tags -->
			<LogTags />



			<!-- 给外部留的接口 -->
			<slot name="bottom"></slot>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.log {
		position: relative;
		width: 100%;
		padding: 0 $gap;

		// 悬浮按钮
		.btns {
			position: absolute;
			top: 16rpx;
			right: 16rpx;

			>view {
				// line-height: 32rpx;

				border-radius: 50%;
				padding: 12rpx;
				background-color: #fff;
			}
		}

		.m {
			transition: 2s;
			padding: $padding;
			border-radius: $border-radius;

			display: flex;
			flex-direction: column;
			gap: 4px;

			.log-bottom {
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: $color-2;
				gap: 16rpx;
			}

			// 空div应该不占用gap
			&>view:empty {
				display: none;
			}
		}

		.showBtn {
			right: 100rpx;
		}
	}
</style>